// 岗位咨询浮窗
Vue.component('floatPopupModular', {
    template: '<div class="float-popup-wrap">' +
        '        <van-popup v-model="showPopup" closeable @closed="clearData" class="consultation-popup" overlay-class="consultation-overlay">' +
        '            <div class="popup-wrap">' +
        '                <div class="popup-header">' +
        '                    <span>岗位咨询</span>' +
        '                </div>' +
        '                <div class="popup-body">' +
        '                    <van-form class="index-form popup-form" scroll-to-error @submit="popupSubmit">' +
        '                        <van-field v-model="form.name" v-model.trim="form.name" name="name" :rules="[{ required: true, message: \'请输入您的姓名\' }]" placeholder="请输入您的姓名"></van-field>' +
        '                        <van-field v-model="form.sex" v-model.trim="form.sex" name="sex" placeholder="请输入您的性别"></van-field>' +
        '                        <van-field v-model="form.age" v-model.trim="form.age" name="age" :rules="[{ validator: ageValid, message: \'请输入正确的年龄\' }]" placeholder="请输入您的年龄"></van-field>' +
        '                        <van-field v-model="form.phone" v-model.trim="form.phone" name="phone" :rules="[{ validator: phoneValid, message: \'请输入正确的手机号\' }]" placeholder="请输入您的手机号"></van-field>' +
        '                        <van-field v-model="form.email" v-model.trim="form.email" name="email" placeholder="请输入您的邮箱地址"></van-field>' +
        '                        <van-field v-model="form.education" v-model.trim="form.education" name="education" placeholder="请输入学历学位"></van-field>' +
        '                        <van-field v-model="form.major" v-model.trim="form.major" name="major" placeholder="请输入您的专业"></van-field>' +
        '                        <van-field v-model="form.work" v-model.trim="form.work" name="work" placeholder="请输入您的工作经验"></van-field>' +
        '                        <van-field v-model="form.message" v-model.trim="form.message" name="message" type="textarea" placeholder="请输入您的留言"></van-field>' +
        '                        <div class="op s-tc mt-20">' +
        '                            <van-button class="index-link" native-type="submit">提交</van-button>' +
        '                        </div>' +
        '                    </van-form>' +
        '                </div>' +
        '            </div>' +
        '        </van-popup>' +
        '        <div class="main-float" v-show="!showPopup">' +
        '            <span class="type-consultation" @click="handleShowPopup"></span>' +
        '        </div>' +
        '    </div>',
    data: function () {
        return {
            form: {
                name: '',
                sex: '',
                age: '',
                phone: '',
                email: '',
                education: '',
                major: '',
                work: '',
                message: '',
            },
            showPopup: false,
        }
    },
    mounted: function() {
        // 定义toast的展示时长
        this.$toast.setDefaultOptions({ duration: 3000 });
    },
    watch: {
        showPopup: function (value) {
            if (value) {
                this.$nextTick(function () {
                    this.changeFocusStatus();
                })
            }
        }
    },
    methods: {
        handleShowPopup: function () {
            this.showPopup = !this.showPopup;
        },
        changeFocusStatus: function () {
            $('.popup-form .van-field__control').on('focus', function () {
                $(this).parents('.van-field').addClass('field-focus');
            }).on('blur', function () {
                $(this).parents('.van-field').removeClass('field-focus');
            })
        },
        clearData: function () {
            var that = this;
            $.each(that.form, function(key, value){
                that.form[key] = '';
            });
        },
        popupSubmit: function (datas) {
            var that = this;
            $.ajax({
                type: 'post',
                url: 'http://www.xafesco.com/job/xawf/consultation',
                data: datas,
                dataType: 'json',
                beforeSend:function (response) {
                    that.$toast.loading({ message: '提交中...', duration: 0, forbidClick: true });
                },
                success: function(response) {
                    if (response.code == 200) {
                        that.$toast({
                            message: '信息发送成功',
                            onClose: function () {
                                that.showPopup = !that.showPopup;
                            }
                        })
                    } else {
                        that.$toast(response.msg || '信息发送失败');
                    }
                },
                error: function(){
                    that.$toast('信息发送失败，请稍后再试');
                }
            });
        }, // 岗位咨询
        ageValid: function (val) {
            return  /^[1-9]\d*$/.test(val);
        }, // 年龄
        phoneValid: function (val) {
            return  /^1[3456789]\d{9}$/.test(val);
        }, // 验证手机号
    }
});

// 导航
var commonMixin = {
    data: function () {
        return {
            showNav: false
        }
    },
    methods: {
        showPopup: function () {
            this.showNav = !this.showNav;
        }
    },
}

